<template>
	<view>
		<popup ref="mapState" protocolPath='../../pageA/aboutthis/aboutthis' policyPath='../../pageA/aboutthis/aboutthis'
		 @popupState="popupState"></popup>
		<view class="content">
			<view class="top_box"><text style="text-align: center;">MeChat<br/><span>为你打造全新社交</span></text></view>

			<view class="text-area">
				<view>
					<view class="flex size"><input type="number" placeholder="手机号/用户UID" v-model="usernametxt" /></view>
					<view class="flex size"><input password="true" placeholder="密码/FaceID" type="digit" v-model="passwordtxt" /></view>
				</view>
			</view>
			<view class="login_flex">
				<view @click="Event_Login()" class=" class_boxlogin"><text style=" font-size: 60rpx;" class=" icon iconfont icon-iconfontjiantou-copy-copy"></text></view>
			</view>
		</view>
		<!-- 关于 -->

		<view class="me">
			<view> 手机号注册 </view>
			<view> | 用户UID注册 | </view>
			<view> 忘记密码</view>
		</view>
	</view>
</template>

<script>
	import popup from '@/components/DuDu-popup/DuDu-popup.vue'
	export default {
		data() {
			return {
				usernametxt: '',
				passwordtxt: ''
			};
		},
		components: {
			popup
		},
		onBackPress(e) {
			// return true 表示禁止默认返回
			return true
		},
		methods: {
			// 是否同意
			popupState(e) {
				if (!e) {
					plus.runtime.quit();
				}
			},
			Event_Login() {
				if (this.usernametxt && this.passwordtxt) {
					// // 这个是模拟的数据，请根据实际修改
					let USERSQL = {
						"openId": "oRrdQt1SRtx9oohZ3cj-PQi6FL7Q",
						"nickName": "Ani",
						"gender": 1,
						"city": "广州",
						"province": "广东",
						"country": "中国",
						"avatarUrl": "https://thirdwx.qlogo.cn/mmopen/vi_32/gkRibKgaZRka2kXlaRkpNiacsteqbfgsGDoiaKEX2y3F8kMialM5INgHl2CicvahxhO4CRojekDW5icMsCMDbZ3YiaV2Q/132",
						"unionId": "oU5YytwWQVfl117go4frJjE3O4uE"
					}
					uni.setStorage({
						key: "userInfo",
						data: USERSQL,
						success() {
							// console.log("缓存成功");
							uni.setStorage({
								key: 'login_status',
								data: 'ok',
								success: function() {
									uni.switchTab({
										url: "../index/index"
									});
								},
								fail() {
									uni.showToast({
										title: '可能下次需重新输入密码',
										duration: 2000,
										icon: 'none'
									});
								}
							});
						}
					})
				} else {
					uni.showToast({
						title: '认真填写哦',
						icon: "none",
						duration: 3000
					});
				}


			},

		},

	}
</script>

<style lang="less" scoped>
	.size {
		font-size: 40rpx;
	}

	.content {
		.top_box {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 70rpx;
			height: 400rpx;
			background-color: #2E9AFE;
			border-radius: 0 0 25% 25%;
			color: white;
		}

		.text-area {
			width: 88%;
			margin: 0 auto;
			font-size: 40rpx;

			.flex {
				margin-top: 80rpx;
				display: flex;
				width: 100%;
				justify-content: space-around;
				align-items: center;
			}

			input {
				height: 120rpx;
				width: 90%;
				border-radius: 30rpx;
				font-size: 40rpx;
				text-align: center;
				background-color: #ebebeb;
			}
		}

	}

	// 补
	.login_flex {
		margin-top: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.class_boxlogin {
			width: 200rpx;
			height: 200rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: white;
			background-color: #2E9AFE;
			border-radius: 50%;
		}
	}

	.me {
		position: fixed;
		bottom: 1%;
		left: 0%;
		font-size: 28rpx;
		display: flex;
		width: 100%;

		justify-content: center;
		align-items: center;
	}
</style>
